<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="banner" id="banner">
        <ul>
            <li><a href="#"><img src="https://tva1.sinaimg.cn/mw690/ea98bce0gy1h83v5o6m9tj22yo1uoqv7.jpg" alt=""></a>
            </li>
            <li><a href="#"><img src="https://tva1.sinaimg.cn/mw690/ea98bce0gy1h87x87ser9j264w43c1l3.jpg" alt=""></a>
            </li>
            <li><a href="#"><img src="https://tva1.sinaimg.cn/mw690/ea98bce0gy1h85lhjbwwwj21hc0xck7r.jpg" alt=""></a>
            </li>
            <li><a href="#"><img src="https://tva1.sinaimg.cn/mw690/ea98bce0gy1h85lhvcimrj24g02yoe86.jpg" alt=""></a>
            </li>
            <li><a href="#"><img src="https://tva1.sinaimg.cn/mw690/ea98bce0gy1h83ha0bwldj22yo18g1ky.jpg" alt=""></a>
            </li>
            <li><a href="#"><img src="https://tva1.sinaimg.cn/mw690/ea98bce0gy1h84xima1s2j22yo18ge82.jpg" alt=""></a>
            </li>
            <li><a href="#"><img src="https://tva1.sinaimg.cn/mw690/ea98bce0gy1h83uy492v7j22yo1uo7wk.jpg" alt=""></a>
            </li>
        </ul>
        <span class="order">
            <!-- <i class="on"></i><i></i><i></i><i></i><i></i><i></i><i></i> -->
        </span>
        <div class="ctrl">
            <button title="上一张" class="prev"><</button>
            <button title="下一张" class="next">></button>
        </div>
    </div>
</body>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(function () {
        //创建控制小圆点
        var imgLis = $('#banner>ul li');
        console.log(imgLis.length);
        for (i = 0; i < imgLis.length; i++) {
            $('<i order=' + i + '></i>').appendTo('.order');
        }
        //在第一个小圆点添加类名“on”
        $('.order i').eq(0).addClass('on');

        //将放置图片的容器ul里第一份”li“复制一份，追加到ul后面
        imgLis.first().clone().appendTo('#banner ul');
        console.log(imgLis.length);
        $('#banner>ul').width($('#banner ul li').width() * (imgLis.length + 1));

        var num = 0;
        var timer = null;
        //状态预设，是为防止用户连续点击左右按钮，导致短时间内图片切换频率过高而犯神经，程序反应不来
        var state = true;
        function play() {

            //从左向右时，判断num，是否大于最大值
            if (num < 0) {
                num = imgLis.length - 1;
                $('#banner>ul').css({ left: -imgLis.length * 500 + 'px' });
            }
            //从右向左时，判断num，是否大于最大值
            if (num > imgLis.length) {
                num = 1;
                $('#banner>ul').css({ left: '0' });
            }
            var left = num * 500;
            $('#banner>ul').animate({ left: -left + 'px' }, function () {
                state = true;
            });
            //焦点
            $('.order i').removeClass('on');
            $('.order i').eq(num).addClass('on');
            if (num >= imgLis.length) {
                $('.order i').first().addClass('on');
            }

        }

        //自动播放
        function autoPlay() {
            timer = setInterval(function () {
                num++;
                play();

            }, 1000);
        }
        //添加鼠标移入暂停，移出继续事件
        $('#banner').mouseover(
            function () {
                clearInterval(timer);
                timer = null;
            }
        ).mouseout(
            function () {
                autoPlay();
            }
        );
        //给左右按钮添加点击事件
        $('.prev').click(function () {
            if (state == true) {
                state = false;
                num--;
                console.log(num);
                play();
            }

        });
        $('.next').click(function () {
            if (state == true) {
                state = false;
                num++;
                play();
            }
        });
        //给焦点添加点击事件
        $('.order i').click(function () {
            num = $(this).index()
            play();
        });
        autoPlay();
    });
</script>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .banner {
        width: 500px;
        height: 312px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
    }

    .banner>ul {
        height: 312px;
        width: 3500px;
        position: absolute;
        left: 0;
        top: 0;
    }

    .banner>ul li {
        float: left;
        width: 500px;
    }

    img{
        width: 500px;
        height: 312px;
    }

    .order {
        display: block;
        height: 30px;
        width: 100%;
        position: absolute;
        top: 90%;
        left: 0;
        text-align: center;
    }

    .order i {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: chocolate;
        border: 2px solid chocolate;
        margin-right: 10px;
        cursor: pointer;
    }

    .order i:last-child {
        margin-right: 0;
    }

    .order .on {
        background: white;
    }

    .ctrl {
        width: 100%;
        height: 60px;
        position: absolute;
        top: 120px;
        left: 0;
    }

    .ctrl button {
        width: 40px;
        height: 60px;
        background: #ccc;
        color: #FFF;
        border: 0;
        outline: none;
        opacity: 0.5;
        font-size: 30px;
        cursor: pointer;
    }

    .ctrl .prev {
        float: left;
        margin-left: 10px;
    }

    .ctrl .next {
        float: right;
        margin-right: 10px;
    }
</style>

</html>